// pages/music-player/index.js
import { audioContext,playerStore } from '../../../store/index'

//播放模式的三种图片的名字
const modeNames=["order", "repeat", "random"]

Page({
  data: {
    isNext:true,//记录上一首还是下一首
    isPlaying:false,//记录歌曲是否在播放
    playerName:'pause', //播放按钮得图片名字
    modeIndex:0, //播放模式的下标 0: 循环播放 1: 单曲循环 2: 随机播放
    modeName:'order', //播放模式的图片名字
    scrollTop:0,//播放歌曲，滚动的位置
    currentLyric:'', //播放歌曲显示歌词
    lyriIndex:0,  //
    lyricData:[], //歌词数据
    isSliderChanging: false,
    sliderValue:0, //进度条播放的位置
    currentTime:0,//音频当前播放的时间
    totalTime:0, //歌曲的总时长 
    aspectRatio:0, //屏幕的宽高比
    lyricShow:true, //是否显示歌词
    id:0,
    songPlayerInfo:{},//歌曲详情
    current:0, //tab切换
    contentHeight:0 //内容高度
  },

  onLoad: function (options) {
    const id = options.id
    this.setData({id})
    this.setupPlayerStoreListener()

    // 动态计算内容的高度
    const global = getApp().globalData
    const screenHeight = global.screenHeight //屏幕高度
    const statusBarHeight = global.statusBarHeight //状态栏高度
    const navBarHeight = global.navBarHeight //导航栏高度
    //内容高度
    const contentHeight = screenHeight-statusBarHeight-navBarHeight 
    this.setData({contentHeight})
    // 屏幕的宽高比
    const aspectRatio = global.aspectRatio
    this.setData({aspectRatio})

  },
  swiperItemChange(event){ //当前页面发生改变
      const current = event.detail.current 
      this.setData({current})
  },
  sliderClickChange(event){//完成一次拖动后触发的事件
    //获取一次拖动后的位置(改变)
    const value= event.detail.value
    
    this.setData({sliderValue:value,isSliderChanging:false})

    // 拿到位置之后是不是要计算这个位置具体播放的时间呢，蠢狗
    const sliderTime = this.data.totalTime * value /100 

    //暂停后在播放
    // audioContext.pause()

    // 跳转    时间单位 s
    audioContext.seek(sliderTime / 1000)

  },
  sliderSlipChanging(event){//进度条拖动过程中触发的事件
    const value = event.detail.value
    const slipValue = value * this.data.totalTime / 100
    this.setData({ currentTime:slipValue,isSliderChanging:true})
  },
  handlePausePlayer(){ //点击歌曲播放或者暂停按钮
    playerStore.dispatch('changeMusicPlayStatusAction',!this.data.isPlaying)
  },
  handleBackClick(){//点击返回
    wx.navigateBack({
    })
  },
  handleModePlayer(){ //点击切换播放模式
    let modeIndex = this.data.modeIndex + 1
    if(modeIndex === 3) modeIndex = 0
    // 给player-store里得modeIndex设置
    playerStore.setState('modeIndex',modeIndex)
  },
  handleLastSong(){//点击上一首
    playerStore.dispatch('changeNewMusicAction',this.data.isNext=false)
  },
  handleNextSong(){ //点击下一首
    playerStore.dispatch('changeNewMusicAction',this.data.isNext=true)
  },
  
  // =====================数据监听==================
  handleCurrentMusicListener({lyricData,songPlayerInfo,totalTime}){
    if(lyricData) this.setData({lyricData})
    if(songPlayerInfo) this.setData({songPlayerInfo})
    if(totalTime) this.setData({totalTime})
  },

  setupPlayerStoreListener(){
    // 为什么没有res而是使用解构对象呢，因为有时候不需要所有得数据
    playerStore.onStates(['lyricData','songPlayerInfo','totalTime'],
    this.handleCurrentMusicListener)

    // 
    playerStore.onStates([ 'currentLyric', 'lyriIndex', 'currentTime'],({
      currentLyric, 
      lyriIndex, 
      currentTime
    })=>{
      if(currentTime && !this.data.isSliderChanging){
          // 获取当前播放时间进度条的位置
          const sliderValue = currentTime / this.data.totalTime *100
          this.setData({currentTime,sliderValue})
      }
      if(lyriIndex){
        //  歌词滚动的距离 
        // 每一句的歌词高度时35px
        const scrollTop = this.data.lyriIndex * 35
        this.setData({lyriIndex,scrollTop})
      }
      if(currentLyric){
        this.setData({currentLyric})
      }
    })
    // 监听播放模式的index 0: 循环播放 1: 单曲循环 2: 随机播放
    playerStore.onStates(['modeIndex','isPlaying'],({modeIndex,isPlaying})=>{
      if(modeIndex !== undefined){
      this.setData({modeIndex,modeName:modeNames[modeIndex]})
      }
      if(isPlaying !== undefined){
         //如果isPlaying为true就是播放得图片，反则暂停得图片
        this.setData({ isPlaying , playerName: isPlaying ?"pause": "resume" })
      }
    })
  },
  onUnload: function () {
    playerStore.offStates(["lyricData", "songPlayerInfo", "totalTime"], this.handleCurrentMusicListener)
},

})






